<template>
  <div class="crontab-generator">
    <div class="header">
      <h1>Crontab 表达式生成器</h1>
      <p>生成 Cron 表达式并预览执行时间</p>
    </div>

    <div class="generator-container">
      <!-- 快速选择 -->
      <div class="quick-select">
        <h3>快速选择</h3>
        <div class="quick-buttons">
          <button @click="setQuickCron('* * * * * * *')" class="quick-btn">每秒</button>
          <button @click="setQuickCron('0 * * * * * *')" class="quick-btn">每分钟</button>
          <button @click="setQuickCron('0 0 * * * * *')" class="quick-btn">每小时</button>
          <button @click="setQuickCron('0 0 0 * * * *')" class="quick-btn">每天</button>
          <button @click="setQuickCron('0 0 0 * * 0 *')" class="quick-btn">每周</button>
          <button @click="setQuickCron('0 0 0 1 * * *')" class="quick-btn">每月</button>
          <button @click="setQuickCron('0 0 0 1 1 * *')" class="quick-btn">每年</button>
        </div>
      </div>

      <!-- Cron表达式输入 -->
      <div class="cron-input-section">
        <h3>直接输入 Cron 表达式</h3>
        <div class="cron-input-group">
          <input 
            v-model="cronInput" 
            @keyup.enter="parseCronInput"
            placeholder="请输入7位cron表达式，如：0 30 21 1/7 * * *" 
            class="cron-input"
          />
          <button @click="parseCronInput" class="parse-btn" :disabled="!cronInput.trim()">解析</button>
        </div>
        <div v-if="parseError" class="error-message">{{ parseError }}</div>
      </div>

      <!-- 详细设置 -->
      <div class="detailed-settings">
        <h3>详细设置</h3>
        <div class="cron-fields">
          <div class="field-group">
            <label>秒 (0-59)</label>
            <input v-model="cronFields.second" @input="updateCronExpression" placeholder="*" />
            <small>* 表示每秒</small>
          </div>
          <div class="field-group">
            <label>分钟 (0-59)</label>
            <input v-model="cronFields.minute" @input="updateCronExpression" placeholder="*" />
            <small>* 表示每分钟</small>
          </div>
          <div class="field-group">
            <label>小时 (0-23)</label>
            <input v-model="cronFields.hour" @input="updateCronExpression" placeholder="*" />
            <small>* 表示每小时</small>
          </div>
          <div class="field-group">
            <label>日 (1-31)</label>
            <input v-model="cronFields.day" @input="updateCronExpression" placeholder="*" />
            <small>* 表示每天</small>
          </div>
          <div class="field-group">
            <label>月 (1-12)</label>
            <input v-model="cronFields.month" @input="updateCronExpression" placeholder="*" />
            <small>* 表示每月</small>
          </div>
          <div class="field-group">
            <label>星期 (0-7)</label>
            <input v-model="cronFields.weekday" @input="updateCronExpression" placeholder="*" />
            <small>0和7都表示周日</small>
          </div>
          <div class="field-group">
            <label>年 (1970-3000)</label>
            <input v-model="cronFields.year" @input="updateCronExpression" placeholder="*" />
            <small>* 表示每年</small>
          </div>
        </div>
      </div>

      <!-- 结果显示 -->
      <div class="result-section">
        <h3>生成的 Cron 表达式</h3>
        <div class="cron-result">
          <code>{{ cronExpression }}</code>
          <button @click="copyCronExpression" class="copy-btn">复制</button>
        </div>
        <div class="description">
          <p><strong>描述：</strong>{{ cronDescription }}</p>
        </div>
      </div>

      <!-- 预计执行时间 -->
      <div class="execution-times">
        <h3>预计后五次执行时间</h3>
        <div class="times-list">
          <div v-for="(time, index) in nextExecutions" :key="index" class="time-item">
            <span class="time-number">{{ index + 1 }}.</span>
            <span class="time-value">{{ time }}</span>
          </div>
        </div>
      </div>

      <!-- 使用说明 -->
      <div class="help-section">
        <h3>使用说明</h3>
        <div class="help-content">
          <p><strong>Cron 表达式格式：</strong>秒 分 时 日 月 星期 年</p>
          <ul>
            <li><code>*</code> - 匹配任何值</li>
            <li><code>,</code> - 分隔多个值，如 1,3,5</li>
            <li><code>-</code> - 表示范围，如 1-5</li>
            <li><code>/</code> - 表示步长，如 */5 表示每5个单位</li>
          </ul>
          <p><strong>示例：</strong></p>
          <ul>
            <li><code>0 0 9 * * 1-5 *</code> - 工作日上午9点</li>
            <li><code>*/15 * * * * * *</code> - 每15秒</li>
            <li><code>0 */15 * * * * *</code> - 每15分钟</li>
            <li><code>0 0 0 1 */3 * *</code> - 每季度第一天</li>
            <li><code>30 0 12 * * * *</code> - 每天中午12点30分</li>
            <li><code>0 0 0 1 1 * 2024</code> - 2024年1月1日午夜</li>
            <li><code>0 30 21 1/7 * * *</code> - 从每月1号开始，每隔7天，在晚上9点30分整</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// 响应式数据
const cronFields = ref({
  second: '*',
  minute: '*',
  hour: '*',
  day: '*',
  month: '*',
  weekday: '*',
  year: '*'
})

const cronExpression = ref('* * * * * * *')
const nextExecutions = ref<string[]>([])
const cronInput = ref('')
const parseError = ref('')

// 计算属性：Cron 表达式描述
const cronDescription = computed(() => {
  return describeCronExpression(cronExpression.value)
})

// 更新 Cron 表达式
const updateCronExpression = () => {
  cronExpression.value = `${cronFields.value.second} ${cronFields.value.minute} ${cronFields.value.hour} ${cronFields.value.day} ${cronFields.value.month} ${cronFields.value.weekday} ${cronFields.value.year}`
  calculateNextExecutions()
}

// 快速设置 Cron 表达式
const setQuickCron = (expression: string) => {
  cronExpression.value = expression
  const parts = expression.split(' ')
  cronFields.value = {
    second: parts[0] || '*',
    minute: parts[1] || '*',
    hour: parts[2] || '*',
    day: parts[3] || '*',
    month: parts[4] || '*',
    weekday: parts[5] || '*',
    year: parts[6] || '*'
  }
  calculateNextExecutions()
}

// 解析输入的Cron表达式
const parseCronInput = () => {
  parseError.value = ''
  
  if (!cronInput.value.trim()) {
    parseError.value = '请输入Cron表达式'
    return
  }
  
  const parts = cronInput.value.trim().split(/\s+/)
  
  // 支持6位、7位和8位格式
  if (parts.length < 6 || parts.length > 8) {
    parseError.value = '请输入6-8位Cron表达式格式，如：秒 分 时 日 月 星期 [年] 或 秒 分 时 日 月 星期 年 [年范围]'
    return
  }
  
  // 根据位数调整解析逻辑
  let cronParts = {
    second: parts[0] || '*',
    minute: parts[1] || '*', 
    hour: parts[2] || '*',
    day: parts[3] || '*',
    month: parts[4] || '*',
    weekday: parts[5] || '*',
    year: '*'
  }
  
  if (parts.length >= 7) {
    cronParts.year = parts[6]
  }
  
  // 如果是8位，处理年份范围
  if (parts.length === 8) {
    // 如果第7位是*，则使用第8位作为年份
    if (parts[6] === '*') {
      cronParts.year = parts[7]
    } else {
      // 否则将第7和第8位合并为年份范围
      cronParts.year = parts[6] + '-' + parts[7]
    }
  }
  
  try {
    // 验证各字段格式
    const fieldRanges = [
      { name: '秒', min: 0, max: 59 },
      { name: '分', min: 0, max: 59 },
      { name: '时', min: 0, max: 23 },
      { name: '日', min: 1, max: 31 },
      { name: '月', min: 1, max: 12 },
      { name: '星期', min: 0, max: 6 },
      { name: '年', min: 1970, max: 3000 }
    ]
    
    // 验证各字段格式
    const fieldsToValidate = [
      { field: cronParts.second, range: fieldRanges[0] },
      { field: cronParts.minute, range: fieldRanges[1] },
      { field: cronParts.hour, range: fieldRanges[2] },
      { field: cronParts.day, range: fieldRanges[3] },
      { field: cronParts.month, range: fieldRanges[4] },
      { field: cronParts.weekday, range: fieldRanges[5] },
      { field: cronParts.year, range: fieldRanges[6] }
    ]
    
    for (const { field, range } of fieldsToValidate) {
      if (field !== '*' && field !== '?' && !validateCronField(field, range.min, range.max)) {
        parseError.value = `${range.name}字段格式错误：${field}`
        return
      }
    }
    
    // 更新各字段
    cronFields.value = cronParts
    
    updateCronExpression()
    cronInput.value = '' // 清空输入框
    
  } catch (error) {
    parseError.value = '解析失败，请检查表达式格式'
  }
}

// 验证Cron字段格式
const validateCronField = (field: string, min: number, max: number): boolean => {
  // 通配符
  if (field === '*' || field === '?') return true
  
  // L - 最后一天/最后一个星期几
  if (field === 'L') return true
  if (/^\d+L$/.test(field)) {
    const num = parseInt(field.slice(0, -1))
    return num >= min && num <= max
  }
  
  // # - 第几个星期几 (如 3#2 表示第2个星期三)
  if (field.includes('#')) {
    const [weekday, occurrence] = field.split('#')
    const weekdayNum = parseInt(weekday)
    const occurrenceNum = parseInt(occurrence)
    return weekdayNum >= 0 && weekdayNum <= 6 && occurrenceNum >= 1 && occurrenceNum <= 5
  }
  
  // 数字
  if (/^\d+$/.test(field)) {
    const num = parseInt(field)
    return num >= min && num <= max
  }
  
  // 范围 (1-5)
  if (/^\d+-\d+$/.test(field)) {
    const [start, end] = field.split('-').map(Number)
    return start >= min && end <= max && start <= end
  }
  
  // 步长 (*/5 或 1-10/2)
  if (field.includes('/')) {
    const [range, step] = field.split('/')
    const stepNum = parseInt(step)
    if (stepNum <= 0) return false
    
    if (range === '*' || range === '?') return true
    if (/^\d+$/.test(range)) {
      const num = parseInt(range)
      return num >= min && num <= max
    }
    if (/^\d+-\d+$/.test(range)) {
      const [start, end] = range.split('-').map(Number)
      return start >= min && end <= max && start <= end
    }
  }
  
  // 列表 (1,3,5) - 支持复杂列表项
  if (field.includes(',')) {
    const values = field.split(',').map(v => v.trim())
    return values.every(v => {
      // 递归验证每个列表项
      return validateCronField(v, min, max)
    })
  }
  
  return false
}

// 复制 Cron 表达式
const copyCronExpression = async () => {
  try {
    await navigator.clipboard.writeText(cronExpression.value)
    alert('Cron 表达式已复制到剪贴板')
  } catch (err) {
    console.error('复制失败:', err)
  }
}

// 描述单个字段
const describeField = (field: string, fieldName: string, min: number, max: number): string => {
  if (field === '*') return ''
  
  if (field.includes('/')) {
    const [range, step] = field.split('/')
    const stepNum = parseInt(step)
    if (range === '*') {
      return `每${stepNum}${fieldName}`
    } else if (range.includes('-')) {
      const [start, end] = range.split('-')
      return `从${start}到${end}每${stepNum}${fieldName}`
    } else {
      // 特殊处理日期字段的步长表达式
      if (fieldName === '日') {
        return `从每月${range}号开始，每隔${stepNum}天`
      }
      return `从${range}开始每${stepNum}${fieldName}`
    }
  }
  
  if (field.includes('-')) {
    const [start, end] = field.split('-')
    return `${start}-${end}${fieldName}`
  }
  
  if (field.includes(',')) {
    return `${field}${fieldName}`
  }
  
  return `${field}${fieldName}`
}

// 描述 Cron 表达式
const describeCronExpression = (expression: string): string => {
  const parts = expression.split(' ')
  if (parts.length !== 7) return '无效的 Cron 表达式'
  
  const [, minute, hour, day, month, weekday, year] = parts
  
  // 简单的描述逻辑
  if (expression === '* * * * * * *') return '每秒执行'
  if (expression === '0 * * * * * *') return '每分钟执行'
  if (expression === '0 0 * * * * *') return '每小时执行'
  if (expression === '0 0 0 * * * *') return '每天午夜执行'
  if (expression === '0 0 0 * * 0 *') return '每周日午夜执行'
  if (expression === '0 0 0 1 * * *') return '每月1号午夜执行'
  if (expression === '0 0 0 1 1 * *') return '每年1月1号午夜执行'
  
  // 解析各个字段的值
  const parseFieldValues = (field: string): string[] => {
    if (field === '*' || field === '?') return []
    
    const values: string[] = []
    const parts = field.split(',')
    
    for (const part of parts) {
      if (part.includes('-')) {
        const [start, end] = part.split('-').map(Number)
        for (let i = start; i <= end; i++) {
          values.push(String(i))
        }
      } else {
        values.push(part)
      }
    }
    
    return values
  }
  
  const hourValues = parseFieldValues(hour)
  const minuteValues = parseFieldValues(minute)
  
  // 构建年份描述
  let yearDesc = ''
  if (year !== '*') {
    if (year.includes('-')) {
      const [start, end] = year.split('-')
      yearDesc = `从 ${start} 年到 ${end} 年`
    } else {
      yearDesc = `${year} 年`
    }
  }
  
  // 构建月份描述
  if (month !== '*') {
    if (month.includes('-')) {
      const [start, end] = month.split('-')
      yearDesc += yearDesc ? '，' : ''
      yearDesc += `每年的 ${start} 月到 ${end} 月期间`
    } else if (month.includes(',')) {
      yearDesc += yearDesc ? '，' : ''
      yearDesc += `每年的 ${month} 月`
    } else {
      yearDesc += yearDesc ? '，' : ''
      yearDesc += `每年的 ${month} 月`
    }
  }
  
  // 构建时间描述
  let timeDesc = ''
  if (hourValues.length > 0 && minuteValues.length > 0) {
    const timePoints: string[] = []
    for (const h of hourValues) {
      for (const m of minuteValues) {
        const hourNum = parseInt(h)
        const minuteNum = parseInt(m)
        const timeStr = `${hourNum}:${minuteNum.toString().padStart(2, '0')}`
        
        if (hourNum < 6) {
          timePoints.push(`凌晨 ${timeStr}`)
        } else if (hourNum < 12) {
          timePoints.push(`上午 ${timeStr}`)
        } else if (hourNum === 12) {
          timePoints.push(`中午 ${timeStr}`)
        } else if (hourNum < 18) {
          timePoints.push(`下午 ${timeStr}`)
        } else {
          timePoints.push(`晚上 ${timeStr}`)
        }
      }
    }
    timeDesc = timePoints.join('、')
  }
  
  // 构建星期描述
  let weekdayDesc = ''
  if (weekday !== '*' && weekday !== '?') {
    const weekNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    if (weekday === '1-5') {
      weekdayDesc = '但只在工作日（周一至周五）执行'
    } else if (weekday.includes('-')) {
      const [start, end] = weekday.split('-')
      const startName = weekNames[parseInt(start)]
      const endName = weekNames[parseInt(end)]
      weekdayDesc = `但只在${startName}至${endName}执行`
    } else if (weekday.includes(',')) {
      const days = weekday.split(',').map(d => weekNames[parseInt(d)] || d).join('、')
      weekdayDesc = `但只在${days}执行`
    } else {
      weekdayDesc = `但只在${weekNames[parseInt(weekday)] || weekday}执行`
    }
  }
  
  // 构建日期描述
  let dateDesc = ''
  if (day !== '*' && day !== '?') {
    if (day.includes(',')) {
      dateDesc = `每月${day}号`
    } else if (day.includes('-')) {
      const [start, end] = day.split('-')
      dateDesc = `每月${start}-${end}号`
    } else {
      dateDesc = `每月${day}号`
    }
  } else {
    dateDesc = '每天'
  }
  
  // 组合描述
  let desc = ''
  if (yearDesc) desc += yearDesc
  
  if (timeDesc) {
    if (dateDesc && dateDesc !== '每天') {
      desc += desc ? '，' + dateDesc + ' ' + timeDesc + ' 触发任务' : dateDesc + ' ' + timeDesc + ' 触发任务'
    } else {
      desc += desc ? '，' + dateDesc + ' ' + timeDesc + ' 触发任务' : dateDesc + ' ' + timeDesc + ' 触发任务'
    }
  } else {
    if (dateDesc && dateDesc !== '每天') {
      desc += desc ? '，' + dateDesc : dateDesc
    } else if (dateDesc === '每天') {
      desc += desc ? '，' + dateDesc : dateDesc
    }
  }
  
  if (weekdayDesc) {
    desc += '，' + weekdayDesc
  }
  
  desc += desc.includes('触发任务') ? '！' : '执行一次'
  
  return desc
}

// 解析Cron字段值
const parseCronField = (field: string, min: number, max: number): number[] => {
  if (field === '*') {
    return Array.from({ length: max - min + 1 }, (_, i) => min + i)
  }
  
  const values: number[] = []
  const parts = field.split(',')
  
  for (const part of parts) {
    if (part.includes('/')) {
      const [range, step] = part.split('/')
      const stepNum = parseInt(step)
      let start = min, end = max
      
      if (range !== '*') {
        if (range.includes('-')) {
          const [s, e] = range.split('-')
          start = parseInt(s)
          end = parseInt(e)
        } else {
          // 对于 "1/7" 这样的表达式，从指定值开始，到最大值结束
          start = parseInt(range)
          end = max
        }
      }
      
      for (let i = start; i <= end; i += stepNum) {
        if (i >= min && i <= max) values.push(i)
      }
    } else if (part.includes('-')) {
      const [start, end] = part.split('-')
      const startNum = parseInt(start)
      const endNum = parseInt(end)
      for (let i = startNum; i <= endNum; i++) {
        if (i >= min && i <= max) values.push(i)
      }
    } else {
      const num = parseInt(part)
      if (num >= min && num <= max) values.push(num)
    }
  }
  
  return [...new Set(values)].sort((a, b) => a - b)
}

// 计算下次执行时间（优化版本）
const calculateNextExecutions = () => {
  const executions: string[] = []
  const now = new Date()
  const parts = cronExpression.value.split(' ')
  
  if (parts.length !== 7) {
    nextExecutions.value = ['无效的Cron表达式']
    return
  }
  
  try {
    const [secondField, minuteField, hourField, dayField, monthField, weekdayField, yearField] = parts
    
    // 快速处理简单表达式
    if (cronExpression.value === '* * * * * * *') {
      for (let i = 0; i < 5; i++) {
        executions.push(new Date(now.getTime() + (i + 1) * 1000).toLocaleString('zh-CN', {
          year: 'numeric', month: '2-digit', day: '2-digit',
          hour: '2-digit', minute: '2-digit', second: '2-digit'
        }))
      }
      nextExecutions.value = executions
      return
    }
    
    // 解析字段值
    const seconds = parseCronField(secondField, 0, 59)
    const minutes = parseCronField(minuteField, 0, 59)
    const hours = parseCronField(hourField, 0, 23)
    const days = parseCronField(dayField, 1, 31)
    const months = parseCronField(monthField, 1, 12)
    const weekdays = parseCronField(weekdayField, 0, 7).map(w => w === 7 ? 0 : w)
    const years = parseCronField(yearField, 1970, 3000)
    
    // 限制计算范围，避免过度复杂的表达式
    const maxCombinations = seconds.length * minutes.length * hours.length
    if (maxCombinations > 1000) {
      nextExecutions.value = ['表达式过于复杂，请简化后重试']
      return
    }
    
    let currentTime = new Date(now)
    currentTime.setMilliseconds(0)
    currentTime.setSeconds(currentTime.getSeconds() + 1)
    
    let found = 0
    const maxDays = 366 // 最多搜索一年
    let dayOffset = 0
    
    // 优化算法：按天遍历，每天内直接计算所有可能的时间点
    while (found < 5 && dayOffset < maxDays) {
      const checkDate = new Date(currentTime)
      checkDate.setDate(currentTime.getDate() + dayOffset)
      
      const year = checkDate.getFullYear()
      const month = checkDate.getMonth() + 1
      const day = checkDate.getDate()
      const weekday = checkDate.getDay()
      
      // 检查年、月、日、星期是否匹配
      const yearMatch = years.length === 0 || years.includes(year)
      const monthMatch = months.length === 0 || months.includes(month)
      const dayMatch = days.length === 0 || days.includes(day)
      const weekdayMatch = weekdays.length === 0 || weekdays.includes(weekday)
      
      // 处理日期和星期的逻辑
      const dayOrWeekdayMatch = (dayField === '*' && weekdayField === '*') ||
                               (dayField === '*' && weekdayField === '?' ) ||
                               (dayField === '?' && weekdayField === '*' ) ||
                               (dayField !== '*' && dayField !== '?' && weekdayField === '*' && dayMatch) ||
                               (dayField === '*' && weekdayField !== '*' && weekdayField !== '?' && weekdayMatch) ||
                               (dayField !== '*' && dayField !== '?' && weekdayField !== '*' && weekdayField !== '?' && (dayMatch || weekdayMatch))
      
      if (yearMatch && monthMatch && dayOrWeekdayMatch) {
        // 在这一天内，直接计算所有可能的时间点
        const dayExecutions: Date[] = []
        
        for (const h of (hours.length > 0 ? hours : [0])) {
          for (const m of (minutes.length > 0 ? minutes : [0])) {
            for (const s of (seconds.length > 0 ? seconds : [0])) {
              const execTime = new Date(year, month - 1, day, h, m, s)
              if (execTime > now) {
                dayExecutions.push(execTime)
              }
            }
          }
        }
        
        // 按时间排序并添加到结果中
        dayExecutions.sort((a, b) => a.getTime() - b.getTime())
        for (const execTime of dayExecutions) {
          if (found >= 5) break
          executions.push(execTime.toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit'
          }))
          found++
        }
      }
      
      dayOffset++
    }
    
    if (found === 0) {
      executions.push('未找到匹配的执行时间')
    }
    
  } catch (error) {
    executions.push('计算错误：' + String(error))
  }
  
  nextExecutions.value = executions
}

// 监听 cronExpression 变化
watch(cronExpression, () => {
  calculateNextExecutions()
}, { immediate: true })
</script>

<style scoped>
.crontab-generator {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.header {
  text-align: center;
  margin-bottom: 30px;
}

.header h1 {
  color: #2c3e50;
  margin-bottom: 10px;
}

.header p {
  color: #7f8c8d;
  font-size: 16px;
}

.generator-container {
  display: grid;
  gap: 30px;
}

.quick-select, .detailed-settings, .result-section, .execution-times, .help-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e8ed;
}

.quick-select h3, .detailed-settings h3, .result-section h3, .execution-times h3, .help-section h3 {
  margin: 0 0 20px 0;
  color: #2c3e50;
  font-size: 18px;
}

.quick-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.quick-btn {
  padding: 8px 16px;
  border: 2px solid #3498db;
  background: white;
  color: #3498db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.quick-btn:hover {
  background: #3498db;
  color: white;
}

.cron-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.field-group {
  display: flex;
  flex-direction: column;
}

.field-group label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #2c3e50;
}

.field-group input {
  padding: 10px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.field-group input:focus {
  outline: none;
  border-color: #3498db;
}

.field-group small {
  margin-top: 4px;
  color: #7f8c8d;
  font-size: 12px;
}

.cron-result {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.cron-result code {
  background: #f8f9fa;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 16px;
  border: 2px solid #e1e8ed;
  flex: 1;
}

.copy-btn {
  padding: 10px 20px;
  background: #27ae60;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.copy-btn:hover {
  background: #219a52;
}

.description p {
  margin: 0;
  color: #2c3e50;
  font-size: 16px;
}

.times-list {
  display: grid;
  gap: 10px;
}

.time-item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #3498db;
}

.time-number {
  font-weight: 600;
  color: #3498db;
  margin-right: 15px;
  min-width: 20px;
}

.time-value {
  font-family: 'Monaco', 'Consolas', monospace;
  color: #2c3e50;
}

.help-content ul {
  margin: 10px 0;
  padding-left: 20px;
}

.help-content li {
  margin: 5px 0;
  color: #2c3e50;
}

.help-content code {
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Monaco', 'Consolas', monospace;
}

@media (max-width: 768px) {
  .crontab-generator {
    padding: 15px;
  }
  
  .cron-fields {
    grid-template-columns: 1fr;
  }
  
  .quick-buttons {
    justify-content: center;
  }
  
  .cron-result {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Cron输入框样式 */
.cron-input-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.cron-input-section h3 {
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-size: 18px;
}

.cron-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

.cron-input {
  flex: 1;
  padding: 12px;
  border: 2px solid #e1e8ed;
  border-radius: 6px;
  font-size: 14px;
  font-family: 'Courier New', monospace;
  transition: border-color 0.2s;
}

.cron-input:focus {
  outline: none;
  border-color: #3498db;
}

.parse-btn {
  padding: 12px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.2s;
}

.parse-btn:hover:not(:disabled) {
  background: #2980b9;
}

.parse-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
}

.error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 8px;
  padding: 8px;
  background: #fdf2f2;
  border: 1px solid #fecaca;
  border-radius: 4px;
}
</style>